<template>
    <el-form class="login-form"
           status-icon
           :rules="loginRules"
           ref="loginForm"
           :model="loginForm"
           label-width="0">

    <el-form-item prop="account">
      <el-input size="small"
                @keyup.enter.native="createUser"
                v-model="loginForm.account"
                auto-complete="off"
                :placeholder="$t('login.username')">
           <i slot="prefix"
           class="icon-yonghu"></i>   
      </el-input>
    </el-form-item>

    <el-form-item prop="password">
      <el-input size="small"
                @keyup.enter.native="createUser"
                :type="passwordType"
                v-model="loginForm.password"
                auto-complete="off"
                :placeholder="$t('login.password')">
        <i class="el-icon-view el-input__icon"
           slot="suffix"
           @click="showPassword"></i>        
           <i slot="prefix"
           class="icon-mima"></i>
      </el-input>
    </el-form-item>

    <el-form-item prop="surepassword">
      <el-input size="small"
                @keyup.enter.native="createUser"
                v-model="loginForm.surepassword"
                :type="passwordType"
                auto-complete="off"
                :placeholder="$t('login.surepassword')">
                <i class="el-icon-view el-input__icon"
           slot="suffix"
           @click="showPassword"></i>        
           <i slot="prefix"
           class="icon-mima"></i>
      </el-input>
    </el-form-item>

    <el-form-item prop="phone">
      <el-input size="small"
                @keyup.enter.native="createUser"
                v-model="loginForm.phone"
                auto-complete="off"
                :placeholder="$t('login.phone')">
           <i slot="prefix" class="icon-shouji"></i>
      </el-input>
    </el-form-item>

    <el-form-item prop="yzmcode">
      <el-input size="small"
                @keyup.enter.native="createUser"
                v-model="loginForm.yzmcode"
                auto-complete="off"
                :placeholder="$t('login.code')">
        <i slot="prefix"
           class="icon-yanzhengma"
           style="margin-top:6px;"></i>
        <template slot="append">
          <span class="msg-text" @click="getcode"
                :class="[{display:msgKey}]">{{$t('login.msgText')}}</span>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item>
      <el-button size="small"
                 type="primary"
                 @click.native.prevent="createUser"
                 class="login-submit">{{$t('login.create')}}</el-button>
    </el-form-item>
    <!-- <userLogin></userLogin>
    <div class="login-menu">
      <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>
    </div> -->
    
  </el-form>
</template>

<script>
   import {getCode,createuser} from "@/api/user";
   import userLogin from "./userlogin"; 

   export default{
      name:"creatUser",
      components:{
        userLogin
      },
      data(){
        return{
            loginForm:{
                account:"",
                password:"",
                surepassword:"",
                phone:"",
                yzmcode:""
            },
            loginRules: {
                account: [
            {required: false, message: "请输入账号", trigger: "blur"}
          ],
          username: [
            {required: true, message: "请输入用户名", trigger: "blur"}
          ],
          password: [
            {required: true, message: "请输入密码", trigger: "blur"},
            {min: 1, message: "密码长度最少为6位", trigger: "blur"}
          ],
          surepassword: [
            {required: true, message: "请输入密码", trigger: "blur"},
            {min: 1, message: "密码长度最少为6位", trigger: "blur"}
          ],
          phone:[
          {required: true, message: "请输入手机号", trigger: "blur"}
          ],
          yzmcode:[
          {required: true, message: "请输入验证码", trigger: "blur"}
          ]
        },
        passwordType: "password"
      }
    },
      methods:{
         createUser(){
            console.log(this.loginForm)
            createuser(this.loginForm).then(res=>{
                if(res.data.code==0){
                this.$message.error(res.data.msg);
            }else{
                this.$message.success("创建成功");
                setTimeout(function(){
                  location.reload();
                },3000);
            }
            })
         },
         showPassword() {
        this.passwordType === ""
          ? (this.passwordType = "password")
          : (this.passwordType = "");
      },
      getcode(){
        getCode(this.loginForm.phone).then(res => {
            if(res.data.code==0){
                this.$message.error(res.data.msg);
            }else{
                console.log(res.data);
                this.$message.success("发送成功");
            }
        })
      }
      }

   }

</script>